<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>电子邮件模板</title>
    <!-- 内联样式确保最佳邮件客户端兼容性 -->
    <style>
        /* 重置样式 */
        html, body { 
            margin: 0; 
            padding: 0; 
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; 
            background-color: #f5f8fa; 
        }
        
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .email-header {
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            color: white;
            text-align: center;
            padding: 30px 20px;
        }
        
        .email-header h1 {
            margin: 0;
            font-weight: 600;
            font-size: 26px;
        }
        
        .email-header p {
            margin: 10px 0 0;
            opacity: 0.9;
            font-size: 15px;
        }
        
        .email-content {
            padding: 35px 40px;
            color: #333333;
            line-height: 1.6;
        }
        
        .email-content h2 {
            color: #2d4275;
            margin-top: 0;
        }
        
        .email-content .highlight {
            background-color: #f0f4ff;
            border-left: 4px solid #4b6cb7;
            padding: 12px 20px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        
        .email-content .btn {
            display: inline-block;
            background: linear-gradient(to right, #4b6cb7, #3a56a2);
            color: white;
            text-decoration: none;
            padding: 12px 28px;
            border-radius: 4px;
            font-weight: 600;
            margin: 20px 0;
            box-shadow: 0 2px 10px rgba(75, 108, 183, 0.3);
            transition: all 0.3s ease;
        }
        
        .email-content .btn:hover {
            background: linear-gradient(to right, #3a56a2, #2d4275);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(75, 108, 183, 0.4);
        }
        
        .features {
            display: flex;
            flex-wrap: wrap;
            margin: 25px -10px;
        }
        
        .feature {
            flex: 1 0 calc(50% - 20px);
            margin: 10px;
            padding: 20px;
            background-color: #f9fafc;
            border-radius: 6px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .feature:hover {
            transform: translateY(-5px);
            background-color: #f0f4ff;
        }
        
        .feature-icon {
            font-size: 32px;
            color: #4b6cb7;
            margin-bottom: 15px;
        }
        
        .email-footer {
            background-color: #182848;
            color: #a0b3d6;
            text-align: center;
            padding: 30px 20px;
            font-size: 13px;
            line-height: 1.6;
        }
        
        .email-footer a {
            color: #a0b3d6;
            text-decoration: none;
        }
        
        .email-footer a:hover {
            color: #ffffff;
            text-decoration: underline;
        }
        
        .social-links {
            margin: 15px 0;
        }
        
        .social-link {
            display: inline-block;
            margin: 0 8px;
            color: #ffffff;
            text-decoration: none;
            width: 36px;
            height: 36px;
            line-height: 36px;
            background-color: rgba(255,255,255,0.15);
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            background-color: rgba(255,255,255,0.3);
            transform: translateY(-3px);
        }
        
        .unsubscribe {
            color: rgba(160, 179, 214, 0.7);
            font-size: 12px;
            margin-top: 20px;
        }
        
        /* 移动设备响应式 */
        @media (max-width: 480px) {
            .email-container {
                border-radius: 0;
            }
            
            .email-content {
                padding: 25px 20px;
            }
            
            .features {
                flex-direction: column;
            }
            
            .feature {
                flex: 1 0 100%;
            }
        }
    </style>
</head>
<body>
    <div class="email-container">
        <div class="email-header">
            <h1>TechSolutions 智能系统</h1>
            <p>高效可靠的软件解决方案提供者</p>
        </div>
        
        <div class="email-content">
            <h2>尊敬的 ${username}，您好！</h2>
            
            <p>感谢您使用我们的服务！本邮件包含重要的账户信息和最新动态。</p>
            
            <div class="highlight">
                <p><strong>重要通知：</strong> 我们最近对系统进行了升级，提升了性能和安全性。建议您使用最新版本的应用程序以获得最佳体验。</p>
            </div>
            
            <p>以下是您的账户相关信息：</p>
            
            <div class="features">
                <div class="feature">
                    <div class="feature-icon">🔐</div>
                    <h3>账户安全</h3>
                    <p>您的账户于 ${lastLogin} 登录</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">🔄</div>
                    <h3>服务状态</h3>
                    <p>${serviceStatus}</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">📊</div>
                    <h3>使用统计</h3>
                    <p>${usageStats}</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">🎁</div>
                    <h3>专属优惠</h3>
                    <p>${exclusiveOffer}</p>
                </div>
            </div>
            
            <p>如您对当前服务有任何疑问，请随时联系我们的客户支持团队。我们将在24小时内回复您的问题。</p>
            
            <p><a href="${actionLink}" class="btn">查看账户详情</a></p>
            
            <p>祝您使用愉快！<br>
            <strong>TechSolutions 团队</strong></p>
        </div>
        
        <div class="email-footer">
            <div class="social-links">
                <a href="#" class="social-link">F</a>
                <a href="#" class="social-link">T</a>
                <a href="#" class="social-link">L</a>
                <a href="#" class="social-link">I</a>
            </div>
            <p>地址：上海市浦东新区科技园区88号 | 电话：(021) 8765-4321</p>
            <p>本邮件由系统自动发送，请勿直接回复。如有疑问，请联系 <a href="mailto:support@techsolutions.com">support@techsolutions.com</a></p>
            <p class="unsubscribe">
                如果您不希望再收到我们的邮件，请 <a href="${unsubscribeLink}">取消订阅</a>
            </p>
            <p>© 2023 TechSolutions Co., Ltd. 保留所有权利</p>
        </div>
    </div>
</body>
</html>